/**
 * Redux 几个概念：
 *
 *    state: 仓库数据
 *    reducer: 纯函数，用于返回全新的 state 数据
 *    dispatch: 函数，用于派发一个动作，动作的派发会进入到 reducer
 *    action: 动作，一般是一个包含有 type 属性的对象格式。
 *                 在使用了 redux-thunk 中间件之后，也可以是一个函数的形式
 *                plane Object - 同步动作
 *                function     - 异步动作
 *    middleware: 中间件
 *    actionType: 动作类型，就是一个同步动作的 type 属性的值。{type: 'incremenet'}
 *    actionCreator: 动作创建函数，是一个函数，函数内返回一个动作，让动作可以在统一的文件中定义，从而复用
 *    immutable:
 *        mutable       - 可变数据
 *        immutable     - 不可变数据
 *
 * actionType:
 *    1. 推荐使用常量的方式来定义 actionType
 *        当使用字符串直接操作时，如果字符串写的有问题，不会报错，数据也不会变动，会导致我们找错误要很久。
 *
 * actionCreator：
 *    1. 使用动作创建函数的好处，就是复用
 *
 */
import { useSelector, useDispatch } from "react-redux";

// 引入对应的动作创建函数
import { add, jian, add10, add20, addByNum } from "./store/action-creator";

export default function App() {
  const count = useSelector((state: any) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>App - {count}</h1>
      <hr />
      <button onClick={() => dispatch(add())}>Add</button>
      <button onClick={() => dispatch(jian())}>Jian</button>

      <button onClick={() => dispatch(addByNum(10))}>Add + 10</button>
      <button onClick={() => dispatch(addByNum(20))}>Add + 20</button>
    </div>
  );
}
